<template>
<div class="page-container-padding" v-loading="pageDataLoading">
  <!-- 查询条件 -->
  <div>
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
      >
      </el-date-picker>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="dateRangeQuery">查询</el-button></span>
    <span style="margin-left:6px;"><el-button type="success" size="mini" @click="currentMonthQuery">查本月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthQuery">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthQuery">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearQuery">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearQuery">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearQuery">下一年</el-button></span>
  </div>
  <el-pagination style="margin-top:5px;"
    background
    :current-page="page"
    :page-size="pageSize"
    layout="total, prev, pager, next, jumper"
    :total="totalCount"
    @current-change="currentPageChange">
  </el-pagination>

</div>
</template>

<script>
import { getMonthDatePoint, getYearDatePoint, datetimeToStr } from '@/utils/datetimeUtils'
export default {
  data(){
    return {
      pageDataLoading: false,
      dateRange: []
    }
  },
  mounted() {
    this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
  },
  methods:{
    // 查询数据
    queryPageData(){},

    // 指定日期范围查询
    dateRangeQuery(){
      this.queryPageData()
    },

    // 本月查询
    currentMonthQuery(){
      this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
      this.queryPageData()
    },

    // 上一月查询
    preMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.queryPageData()
    },

    // 下一月查询
    nextMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.queryPageData()
    },

    // 当前月份所在全年查询
    yearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.queryPageData()
    },

    // 上一年查询
    preYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.queryPageData()
    },

    // 下一年查询
    nextYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.queryPageData()
    }
  }
}
</script>

<style>
</style>
